<template>
	<view>
		<view class="dhbox">
			<view class="kong"></view>
			<!-- 主tab栏 -->
			<view class="qh">
				<view v-for="(page, index) in pages" :key="index" class="qiu" @click="checked(index)">
					<view :class="{'active': current === index}">
						{{ page.title }}
					</view>
				</view>
			</view>
			<view class="kaijiang" @click="goToKaijianggonggao">开奖公告</view>
		</view>

		<!-- 足球页面内容 -->
		<view v-if="current === 0" class="saishiqiehuan">
			<!-- 子tab栏 -->
			<view class="tabbox">
				<view v-for="(tab, index) in tabs" :key="index" class="tab" @click="subChecked(index)">
					{{ tab }}
					<view v-if="subCurrent === index" class="tab-underline"></view>
				</view>
			</view>
			<!-- 子tab内容 -->
			<view v-if="subCurrent === 0" class="content">
				<!-- 滚动条部分 -->
				<view class="timebox">
					<view v-for="(item, index) in timeSlots" :key="index" class="time">
						<text class="text1">{{ item.dayName }}</text>
						<text class="text2">{{ item.date }}</text>
					</view>
				</view>
				<!-- 滚动条部分 -->
				<scroll-view class="scroll" scroll-x>
					<view class="group">
						<view class="item" v-for="day in dates" :key="day.date" @click="handleDayClick(day.date)"
							:class="{ 'selected': currentDay === day.date }">
							<view class="textitem1">{{ day.day }}</view>
							<view class="textitem2">{{ day.date }}</view>
						</view>
					</view>
				</scroll-view>
				<view class="nrbox">
					<view class="day">
					{{ currentDayContent }}
						<!-- 比赛信息 -->
						<view class="bisai" v-for="(match, index) in matches" :key="index">
							<view class="riqi">
								<view class="text111">{{ match.name }}</view>
								<view class="text222">{{ isPastDate(match.date) ? '完场' : '未完场' }} {{ match.date }}
								</view>
							</view>
							<view class="box">
								<view class="team">
									<view class="teamnr1">
										<view class="image1">
											<image class="img1" :src="match.homeTeamImage"></image>
										</view>
										<view class="text3">{{ match.homeTeam }}</view>
									</view>
									<view class="teamnr2">
										<view class="text4">{{ match.sp }}</view>
									</view>
								</view>
								<view class="bifen">
									<view class="text5">{{ match.score }}</view>
									<view class="text6">{{ match.halfTimeScore }}</view>
								</view>
								<view class="team">
									<view class="teamnr1">
										<view class="image1">
											<image class="img1" :src="match.awayTeamImage"></image>
										</view>
										<view class="text3">{{ match.awayTeam }}</view>
									</view>
									<view class="teamnr2">
										<view class="text4">{{ match.spread }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="subCurrent === 1" class="content">
				<view class="page">北单页面内容</view>
			</view>
			<view v-if="subCurrent === 2" class="content">
				<view class="page">足彩页面内容</view>
			</view>
		</view>
		<!-- 篮球页面内容 -->
		<view v-if="current === 1" class="saishiqiehuan">
			<view class="page">篮球页面内容：暂无内容</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dates: [], // 存储日期和内容
				currentDay: '', // 初始化为空字符串
				current: 0, // 默认选中第一个主tab
				subCurrent: 0, // 默认选中第一个子tab
				pages: [{
						index: 0,
						title: '足球'
					},
					{
						index: 1,
						title: "篮球"
					}
				],
				tabs: ['竞彩', '北单', '足彩'], // 子tab标题数组
				timeSlots: [], // 时间槽数组
				matches: [ // 比赛信息数组
					{
						name: '周X001.亚冠',
						date: '00-00 20:00',
						homeTeam: '山东泰山',
						homeTeamImage: '../../static/zhudui.png',
						awayTeam: '曼谷联',
						awayTeamImage: '../../static/kedui.png',
						sp: '竞彩sp 2.50 3.20 2.40',
						spread: '主（-1）5.55 4.45 1.38',
						score: '1:0',
						halfTimeScore: '上半场0:0'
					},
					{
						name: '周X001.亚冠',
						date: '00-00 20:00',
						homeTeam: '山东泰山',
						homeTeamImage: '../../static/zhudui.png',
						awayTeam: '曼谷联',
						awayTeamImage: '../../static/kedui.png',
						sp: '竞彩sp 2.50 3.20 2.40',
						spread: '主（-1）5.55 4.45 1.38',
						score: '1:0',
						halfTimeScore: '上半场0:0'
					},
					{
						name: '周X001.亚冠',
						date: '00-00 20:00',
						homeTeam: '山东泰山',
						homeTeamImage: '../../static/zhudui.png',
						awayTeam: '曼谷联',
						awayTeamImage: '../../static/kedui.png',
						sp: '竞彩sp 2.50 3.20 2.40',
						spread: '主（-1）5.55 4.45 1.38',
						score: '1:0',
						halfTimeScore: '上半场0:0'
					},
					// ... 更多比赛信息 ...
				]
			};
		},
		computed: {
			currentDayContent() {
				const day = this.dates.find(d => d.date === this.currentDay);
				return day ? day.content : '今日内容未定义';
			}
		},
		methods: {
			goToKaijianggonggao() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/kaijianggonggao/kaijianggonggao'
				});
			},
			checked(index) {
				this.current = index;
				this.subCurrent = 0; // 当切换主tab时，重置子tab
			},
			subChecked(index) {
				this.subCurrent = index;
			},
			initDates() {
				const today = new Date();
				const currentMonth = today.getMonth() + 1;
				const lastMonth = currentMonth === 1 ? 12 : currentMonth - 1;
				const lastYear = currentMonth === 1 ? today.getFullYear() - 1 : today.getFullYear();

				// 获取当前月的所有日期
				const currentMonthDates = [];
				const daysInCurrentMonth = new Date(today.getFullYear(), currentMonth, 0).getDate();
				for (let i = 1; i <= daysInCurrentMonth; i++) {
					const date = new Date(today.getFullYear(), currentMonth - 1, i);
					currentMonthDates.push({
						date: `${(date.getMonth() + 1).toString().padStart(2, '0')}.${(date.getDate()).toString().padStart(2, '0')}`,
						content: `这是${(date.getMonth() + 1)}.${(date.getDate())}的内容`,
						day: this.getDayOfWeek(date, today)
					});
				}

				// 获取上个月20号之后的所有日期
				const lastMonthDates = [];
				const daysInLastMonth = new Date(lastYear, lastMonth, 0).getDate();
				for (let i = 20; i <= daysInLastMonth; i++) {
					const date = new Date(lastYear, lastMonth - 1, i);
					lastMonthDates.push({
						date: `${(date.getMonth() + 1).toString().padStart(2, '0')}.${(date.getDate()).toString().padStart(2, '0')}`,
						content: `这是${(date.getMonth() + 1)}.${(date.getDate())}的内容`,
						day: this.getDayOfWeek(date, today)
					});
				}

				this.dates = [...lastMonthDates, ...currentMonthDates];
			},
			getDayOfWeek(date, today) {
				const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				if (date.getDate() === today.getDate() &&
					date.getMonth() === today.getMonth() &&
					date.getFullYear() === today.getFullYear()) {
					return '今天'; // 当天日期
				}
				return days[date.getDay()];
			},
			handleDayClick(day) {
				this.currentDay = day;
			},
			isPastDate(dateString) {
				const now = new Date();
				const dateParts = dateString.split(' ');
				const date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2], dateParts[3], dateParts[4]);
				return now > date;
			}
		},
		onReady() {
			this.initDates();
			const today = new Date();
			this.currentDay =
				`${(today.getMonth() + 1).toString().padStart(2, '0')}.${(today.getDate()).toString().padStart(2, '0')}`;
		}
	}
</script>

<style>
	/* 滚动可视区域 */
	.scroll {
		margin: 10px 0;
		/* border: 1px solid red; */
		box-sizing: border-box;
	}

	.group {
		width: 750rpx;
		white-space: nowrap;
	}

	.item {
		text-align: center;
		font-size: 25rpx;
		width: 200rpx;
		/* background-color: pink; */
		display: inline-block;
		margin-right: 10rpx;
		color: #7e7e7e;
	}

	.item.selected {
		color: black;
	}

	.nrbox {
		height: 200rpx;
		width: 100%;
	}

	.day {
		font-size: 30rpx;
		text-align: center;
	}

	.riqi {
		display: flex;
		padding: 2%;
	}

	.text111 {
		font-size: 30rpx;
		margin-right: 3%;
		color: #7e7e7e;
	}

	.text222 {
		font-size: 30rpx;
		color: red;
	}

	.box {
		width: 96%;
		display: flex;
		padding: 2%;
	}

	.team {
		width: 35%;
		padding: 2.5%;
	}

	.teamnr1 {
		display: flex;
		padding: 2%;
	}

	.image1 {
		width: 25%;
		margin-right: 4%;
	}

	.img1 {
		width: 100%;
		height: 60rpx;
	}

	.text3 {
		font-size: 32rpx;
	}

	.teamnr2 {
		padding: 2%;
	}

	.text4 {
		font-size: 20rpx;
		color: #7e7e7e;
	}

	.bifen {
		width: 16%;
		padding: 2%;
	}

	.text5 {
		font-size: 45rpx;
		color: red;
	}

	.text6 {
		font-size: 24rpx;
		color: red;
	}



	.dhbox {
		width: 96%;
		display: flex;
		background: red;
		border: 1px solid wheat;
		padding: 2%;
		/* 		justify-content: space-between; */
	}

	.kong {
		width: 30%;
		height: 15px;
		/* background: yellow; */
	}

	.qh {
		/* display: flex;
		width: 40%;
		background-color: #e96867;
		border-radius: 30rpx;
		height: 50rpx;
		align-items: center; */

		width: 159px;
		height: 32px;
		background: #e96867;
		border-radius: 16px;
		line-height: 32px;
		display: flex;
	}

	.qiu {
		width: 50%;
		font-size: 30rpx;
		color: white;
		text-align: center;
		cursor: pointer;
	}

	.kaijiang {
		width: 26%;
		color: white;
		font-size: 30rpx;
		text-align: center;
		padding: 2%;
		cursor: pointer;
	}

	/* tab栏样式 */
	.tabbox {
		width: 94%;
		background-color: red;
		display: flex;
		padding: 3%;
		justify-content: space-around;
	}

	.tab {
		color: white;
		text-align: center;
		font-size: 30rpx;
		cursor: pointer;
		position: relative;
	}

	.active {
		/* background-color: white;
		color: red;
		border-radius: 30rpx;
		border: 2rpx solid red;
		padding: 3%;
		width: 105%;
		height: 50rpx; */

		border-radius: 16px;
		/* 		    display: inline-block; */
		background: #fff;
		color: #e02826;
		width: 87px;
	}

	.tab-underline {
		content: "";
		position: absolute;
		width: 116rpx;
		height: 8rpx;
		background-color: #fce9e9;
		/* left: 0px; */
		right: -15px;
		bottom: -4px;
		margin: -8px auto;
	}

	.box {
		width: 96%;
		display: flex;
		padding: 2%;
	}

	.team {
		width: 35%;
		padding: 2.5%;
	}

	.teamnr1 {
		display: flex;
		padding: 2%;
	}

	.image1 {
		width: 25%;
		margin-right: 4%;
	}

	.img1 {
		width: 100%;
		height: 60rpx;
	}

	.text3 {
		font-size: 32rpx;
	}

	.teamnr2 {
		padding: 2%;
	}

	.text4 {
		font-size: 20rpx;
		color: #7e7e7e;
	}

	.bifen {
		width: 16%;
		padding: 2%;
	}

	.text5 {
		font-size: 45rpx;
		color: red;
	}

	.text6 {
		font-size: 24rpx;
		color: red;
	}

	.content {
		width: 100%;
		height: 70vh;
		/* background-color: paleturquoise;
		display: flex;
		justify-content: center;
		align-items: center; */
	}

	.page {
		width: 100%;
		height: 100%;
		background-color: #f0f0f0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #333;
	}
</style>
